<template>
  <div>
    <app-loading :isHidLoading="isHidLoading"></app-loading>
    <div class="pending" ref="pending">
      <ul>
        <li class="payStatus" v-for="(item, key) in payStatusCom" :key="key">
          <div class="pay_img">
            <div v-for="(img, index) in item.orderProd" :key="index">
              <img :src=" img.prodImg" alt="">
            </div>
          </div>
          <div class="pay_price">
            共{{numFn(item.orderProd)}}件商品
            <span class="payStatus_success" v-if="item.payStatus === 1">实付款:</span>
            <span>&nbsp;￥{{priceFn(item.orderProd)}}</span>
          </div>
        </li>
        <li class="pay_box"></li>
      </ul>
    </div>

  </div>

</template>

<script>
    export default {
        name: "pending",
        data(){
            return{
              payStatusCom:null,
              isHidLoading:false
            }
        },
        created(){
          this.isHidLoading = true;
          this.$http.get('/api/order',{params:{payStatus:1}}).then(req=>{
            req.data.code === 1 && (this.payStatusCom = req.data.data.reverse());

          })
        },
        mounted(){
          this.$nextTick(()=>{
            this.$refs.pending && new this.$BSscroll(this.$refs.pending,{
                  //动画移动方向
                  scrollY:true,
                  //弹跳的方向
                  bounce:{
                      left:false,
                      right:false,
                      top:false,
                      bottom:true
                  },
                  //动画速率
                  momentum:true,
                  click:true
              })
          })
      },
        methods:{
          priceFn(data){
            let pri = 0;
            data.forEach(item=>{pri+=item.num*item.price;});
            return Number(pri).toFixed(2);
          },
          numFn(data){
            let pri = 0;
            data.forEach(item=>{pri+=item.num;});
            return pri;
          }
        },
        watch:{
          payStatusCom(){
            if(this.payStatusCom){
              this.isHidLoading = false;
            }
          }
        }

    }
</script>

<style scoped>
    .pending{
        height: 100vh;
        overflow: hidden;
    }
    .pay_box{
      text-align: center;
      font-size: 24px;
      color: #a7a7a7;
      height: 415px;
    }
    .pay_price>span{
      color: #4a4a4a;
      font-family: 华文细黑;
      font-weight: bold;
    }
    ul{
        margin: 0;
        position: relative;
        z-index: 9;
        list-style: none;
    }
    ul>li{
      font-size: 32px;
      line-height: 80px;
      width: 100%;
      margin-bottom: 2px;
    }
    .payStatus{
      border-bottom: 1px solid #eee;
    }
  .pay_price{
    color: #7f7f7f;
    padding: 0 50px;
    text-align: right;
    font-size: 32px;
  }
    .pay_price>.payStatus_success{
      display: inline;
      padding: 10px 20px;
      border-radius: 40px;
      font-weight: 400;
      color:#67c23a;
      background: #f0f9eb;
      border: 1px solid #e1f3d8
    }

  .pay_img{
    width: 100vw;
    overflow: hidden;
    padding: 0 20px;
    display: inline-block;
    box-sizing: border-box;
    height: 160px;
    line-height: 160px;
    background: #fafafa;
  }
    .pay_img>div{
      margin-left: 20px;
      margin-top: 15px;
      max-height: 130px;
      background: #fff;
      display: inline-block;
    }

    .pay_img>div>img{
      max-width: 130px;
      /*margin-left: 20px;*/
    }
</style>
